import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';


interface TechFloorProps {
  size: number;
  position: [number, number, number];
  rotation: [number, number, number];
  color?: string;
  lineColor?: string;
  glowColor?: string;
  lineDensity?: number;
}

const TechFloor: React.FC<TechFloorProps> = ({
  size,
  position,
  rotation,
  color = '#4A6A86', // 深色基底
  lineColor = '#00f0ff', // 亮蓝色线条
  glowColor = '#214168', // 亮蓝色发光效果
  lineDensity = 25
}) => {
  const meshRef = useRef<THREE.Mesh>(null);
  const timeRef = useRef(0);

  // 自定义着色器材质配置
  const shaderConfig = {
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform float time;
      uniform vec3 color;
      uniform vec3 lineColor;
      uniform vec3 glowColor;
      uniform float lineDensity;
      varying vec2 vUv;
      
      // 噪声函数
      float noise(vec2 p) {
        return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
      }
      
      // 平滑噪声
      float smoothNoise(vec2 p) {
        vec2 i = floor(p);
        vec2 f = fract(p);
        
        float a = noise(i);
        float b = noise(i + vec2(1.0, 0.0));
        float c = noise(i + vec2(0.0, 1.0));
        float d = noise(i + vec2(1.0, 1.0));
        
        vec2 u = f * f * (3.0 - 2.0 * f);
        
        return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
      }
      
      void main() {
        // 基础颜色
        vec4 baseColor = vec4(color, 1.0);
        
        // 添加主要网格线 - 增强科技感
        float lineThickness = 0.012;
        float xLine = step(lineThickness, mod(vUv.x * lineDensity + time * 0.02, 1.0));
        float yLine = step(lineThickness, mod(vUv.y * lineDensity + time * 0.02, 1.0));
        
        // 混合网格线
        vec4 lineColorMixed = vec4(lineColor, 1.0);
        vec4 mixed = mix(lineColorMixed, baseColor, xLine * yLine);
        
        // 添加动态发光效果 - 增强科技感
        float glowFactor = 0.25 + 0.15 * sin(time * 0.4 + vUv.x * 8.0 + vUv.y * 8.0);
        vec4 glow = vec4(glowColor, glowFactor);
        mixed += glow;
        
        // 添加网格线交点发光效果
        // float intersectionGlow = 0.3 * exp(-pow(max(xLine, yLine) - 0.5, 2.0) * 50.0);
        // mixed.rgb += vec3(intersectionGlow * glowColor);
        
        // 添加细微的纹理变化
        float textureNoise = smoothNoise(vUv * 40.0 + time * 0.03) * 0.08;
        mixed.rgb += textureNoise;
        
        // 添加区域发光效果 - 模拟地板分区
        float areaGlow = 0.15 * (sin(vUv.x * 4.0) * sin(vUv.y * 4.0)) * exp(-pow(vUv.x - 0.5, 2.0) * 2.0 - pow(vUv.y - 0.5, 2.0) * 2.0);
        mixed.rgb += vec3(areaGlow * glowColor);
        
        gl_FragColor = mixed;
      }
    `,
    uniforms: {
      time: { value: 0 },
      color: { value: new THREE.Color(color) },
      lineColor: { value: new THREE.Color(lineColor) },
      glowColor: { value: new THREE.Color(glowColor) },
      lineDensity: { value: lineDensity }
    },
    side: THREE.DoubleSide,
    transparent: true
  };

  // 使用useFrame更新时间
  useFrame(() => {
    if (meshRef.current && meshRef.current.material) {
      const material = meshRef.current.material as THREE.ShaderMaterial;
      if ('uniforms' in material && material.uniforms.time) {
        timeRef.current += 0.016;
        material.uniforms.time.value = timeRef.current;
      }
    }
  });

  return (
    <mesh ref={meshRef} position={position} rotation={rotation}>
      <planeGeometry args={[size, size]} />
      <shaderMaterial
        vertexShader={shaderConfig.vertexShader}
        fragmentShader={shaderConfig.fragmentShader}
        uniforms={shaderConfig.uniforms}
        side={shaderConfig.side}
        transparent={shaderConfig.transparent}
      />
    </mesh>
  );
};

export default TechFloor;